<template>
  <div class="sort">
    <div class="sorttop">
      <div :class="{ active: index == num }" @click="change(index)" v-for="(item,index)  in arr" :key="index" >{{item}}</div>
    </div>
    <div @click="detail(item)" class="min" v-for="(item,index) in keyData" :key="index">
        <div class="img"><img :src="item.img1" alt=""></div>
        <div class="lefts">
          <div class="deltex">{{ item.desc|fil}}...</div>
          <div class="sumtext">{{ item.proname | fil }}</div>
          <div class="pic">￥{{ item.originprice }}</div>
          <div class="num">销量：{{ item.sales }}</div>
        </div>

    </div>
  </div>
</template>

<script>
import { SortData } from  '@/api/index.js'
export default {
  data() {
    return {
      keyData: [],
      num:0,
      arr: ['综合', '销量', '价格', '筛选'],
      arr1: [],
    }
  },
  mounted() {
    // console.log(this.$route.query.word);
    SortData(1, 20, this.$route.query.word).then((ok) => {
      console.log(ok)
      this.keyData = ok.data.data
      console.log(this.keyData)
    })
  },
  methods: {
    change(x) {
      this.num = x;
      if (x == 1) {
        this.keyData.sort((a, b) => {
          return a.sales - b.sales
        })
        console.log(this.keyData)
      }
      if (x == 2) {
        this.keyData.sort((a, b) => {
          return a.originprice - b.originprice
        })
      }
      
    },
    detail(x) {
      var ids = x.proid
      this.$router.push({ path: '/Detail', query: { id: ids }})
    }
  },
  filters: {
    fil(text) {
      if (text.length > 10) {
        return text.slice(0,45)
      }
    }
  }
}

</script>

<style lang="scss" scoped>
.sort{
  width: 100%;
  background-color: #ffffff;
  .sorttop{
    border-bottom: 1px solid #dedede;
    border-top: 1px solid #dedede;
    font-size: 0.14rem;
    width: 100%;
    height: 0.44rem;
    display: flex;
    justify-content:space-around;
    align-items: center;
    .active{
      color: #ff6600;
    }
  }
  .min{
    width: 95%;
    height: 1.52rem;
    margin: 0.12rem 2.5%;
    display: flex;
    justify-content: space-between;
    .img{
      height: 1.52rem;
      img{
        width: 1rem;
        height: 1rem;
      }
    }
    .lefts{
      width: 2.45rem;
      height: 1.6rem;
      border-bottom: 1px solid #dedede;
      box-sizing: border-box;
      .deltex{
        font-size: 0.13rem;
        color: #333333;
      }
      .sumtext{
        font-size: 0.12rem;
        color: #999999;
      }
      .pic{
        font-size: 0.17rem;
        color: #ff6600;
        margin: 0.08rem 0;
      }
      .num{
        font-size: 0.12rem;
        padding: 0.05rem;
      }
    }
  }
}
</style>